<template>
  <div class="common-table">
    <div class="table-item">
      <formItem title="名称">
        <template v-slot:rightText>
          <span>{{ formObj.title }}</span>
        </template>
      </formItem>
      <formItem title="位置">
        <template v-slot:rightText>
          <span>{{ formObj.landLocation }}</span>
        </template>
      </formItem>
      <formItem title="面积">
        <template v-slot:rightText>
          <span>{{ formObj.landArea }}</span>
        </template>
      </formItem>
    </div>
    <div class="table-item">
      <formItem title="区镇">
        <template v-slot:rightText>
          <span>{{ formObj.town }}</span>
        </template>
      </formItem>
      <formItem title="类型">
        <template v-slot:rightText>
          <span>{{ formObj.type }}</span>
        </template>
      </formItem>
      <formItem title="用途">
        <template v-slot:rightText>
          <span>{{ formObj.class }}</span>
        </template>
      </formItem>
    </div>
    <div class="table-item">
      <formItem title="完成时间">
        <template v-slot:right>
          <el-date-picker
              v-model="formObj.finishTime"
              type="date"
              placeholder="选择日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
          />
        </template>
      </formItem>
    </div>
    <div class="upload-item">
      <div class="upload-title">
        <span>标准地二维码</span>
      </div>
      <div class="upload">
        <el-upload
            class="upload"
            v-model:file-list="fileList"
            :http-request="PassUrl"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :limit="1"
        >
          <el-icon>
            <Plus/>
          </el-icon>
        </el-upload>
      </div>
      <el-dialog v-model="dialogVisible" style="width: 80px;height: 80px">
        <img w-full :src="dialogImageUrl" alt="Preview Image"/>
      </el-dialog>
    </div>

  </div>

</template>
<script lang="ts">
import {reactive, defineComponent, getCurrentInstance, onMounted, watch, ref} from 'vue'
import formItem from "@/components/commonFomItem/index.vue";
import {Plus} from '@element-plus/icons-vue'
import {ElNotification, UploadProps, UploadUserFile} from "element-plus";

export default defineComponent({
  components: {formItem, Plus},
  props: ['index', 'newState','confirmState'],
  setup(props) {
    const formObj = reactive({
      landLocation: '',
      landArea: '',
      type: '',
      town: '',
      class: '',
      title: '',
      finishTime:'',
      fileName:''
    })
    const {appContext} = getCurrentInstance();
    const dialogVisible = ref(false)
    const dialogImageUrl = ref('')
    const fileList = reactive([])
    //上传图片
    const PassUrl = (option) => {
      appContext.config.globalProperties.axios({
        url: 'api/insert/standardLandPicture',
        method: 'post',
        data: formObj,
        transformRequest: [function () {
          let oMyForm = new FormData();
          oMyForm.append("landId", props.index);
          oMyForm.append("file", option.file);
          return oMyForm;
        }]
      }).then(() => {
        formObj.fileName = "img01." + option.file.name.split(".")[1]
        // console.log(formObj.fileName)
        ElNotification({
          title: '上传图片',
          message: "上传成功",
          type: 'success',
          position: 'top-left',
          offset: 300,
        })
      }).catch(() => {
        ElNotification({
          title: '上传图片',
          message: "只能上传一张图片",
          type: 'warning',
          position: 'top-left',
          offset: 300,
        })
      })
    }
    //预览图片
    const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
      dialogImageUrl.value = uploadFile.url!
      dialogVisible.value = true
    }
    //删除图片
    const handleRemove: UploadProps['onRemove'] = () => {
      appContext.config.globalProperties.axios({
        url: 'api/delete/standardLand',
        method: 'post',
        data: formObj,
        transformRequest: [function () {
          let oMyForm = new FormData();
          oMyForm.append("landId", props.index);
          return oMyForm;
        }]
      }).then(() => {
        formObj.finishTime = ''
        ElNotification({
          title: '删除图片',
          message: "删除成功",
          type: 'success',
          position: 'top-left',
          offset: 300,
        })
      })
    }

    watch(() => props.newState, () => {
      reload()
    })

    watch(()=>props.confirmState,()=>{
      confirmModel()
    })
    const confirmModel=()=>{
      appContext.config.globalProperties.axios({
        url: `api/insert/standardLand`,
        method:'post',
        transformRequest: [function () {
          let oMyForm = new FormData();
          oMyForm.append("landId", props.index);
          oMyForm.append("picture",formObj.fileName);
          oMyForm.append("finishTime", formObj.finishTime);
          return oMyForm;
        }]
      }).then(()=>{
        ElNotification({
          title: '上传数据',
          message: "上传成功",
          type: 'success',
          position: 'top-left',
          offset: 300,
        })
      })
    }
    const reload = () => {
      fileList.length = 0
      appContext.config.globalProperties.axios.post(`api/landSearch/${props.index}`)
          .then((response) => {
            response.data.forEach(item => {
              formObj.class = item.landType
              formObj.title = item.bz
              formObj.town = item.town
              formObj.landLocation = item.landLoc
              formObj.landArea = item.landArea
              formObj.type = item.type
            })
          })
      appContext.config.globalProperties.axios({
        url: `api/search/standardLand`,
        method: 'post',
        data: formObj,
        transformRequest: [function () {
          let oMyForm = new FormData();
          oMyForm.append("landId", props.index);
          return oMyForm;
        }]
      }).then((response) => {
        formObj.finishTime = response.data
        // console.log(response.data)
        let object = {
          url: 'http://localhost:8081/getImg/standardLand?landId=' + props.index
        }
        fileList.push(object)
      })

    }

    onMounted(() => {
      reload()
    })
    return {
      formObj,
      fileList,
      dialogVisible,
      handlePictureCardPreview,
      handleRemove,
      dialogImageUrl,
      PassUrl,
      reload,
      confirmModel
    }
  }
})
</script>


<style scoped lang="scss">
.common-table {

  .upload-item{
    display: inline-flex;
    align-items:center;
    color: #e9e9e9;
    .upload{
      margin-left: 10px;
    }
  }

  .table-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;



    img {
      width: 500px;
      margin-left: 24%;
    }

    .table-full-text {
      display: flex;
      width: 100%;
      align-items: center;

      .left {
        color: rgba(240, 245, 255, 0.95);
        padding-right: 10px;
        width: 61px;
      }

      .right {
        flex: 1;

        .red-line {
          display: flex;
          align-items: center;

          .red-line-text {
            padding-right: 12px;
          }
        }
      }
    }
  }

  .empty-form-item {
    width: 280px;
  }

  .tips-text {
    margin-left: 62px;
    margin-top: -16px;
  }

  .table-item-input-btn {
    position: relative;

    .float-btn {
      position: absolute;
      right: 2px;
      top: 0;
    }
  }
}

.table-item-step-five {
  display: flex;
  align-items: center;

  .table-item-five-input {
    width: 512px;
    padding-left: 16px;
  }

  .table-item-step-five-button {
    padding-left: 18px;
  }
}
</style>
